<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<body>
    <!-- 订单列表内容 -->
    <div th:if="${orderPage != null && !orderPage.records.empty}">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">订单号</th>
                        <th>用户ID</th>
                        <th>金额</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th class="pe-3">操作</th>
                    </tr>
                </thead>
                <tbody>
                        <tr th:each="order : ${orderPage.records}">
                            <td class="ps-3">
                                <a th:href="@{'/admin/order/' + ${order.orderNo}}" 
                                   class="text-decoration-none fw-bold" th:text="${order.orderNo}">202506080000000000</a>
                            </td>
                            <td th:text="${order.userId}">1</td>
                            <td class="fw-bold">¥<span th:text="${#numbers.formatDecimal(order.payment, 1, 2)}">0.00</span></td>
                            <td>
                                <span th:class="${order.status == 10 ? 'status-badge bg-danger' : 
                                               order.status == 20 ? 'status-badge bg-warning' : 
                                               order.status == 30 ? 'status-badge bg-primary' : 
                                               order.status == 40 ? 'status-badge bg-success' : 
                                               'status-badge bg-secondary'}"
                                      th:text="${order.statusDesc}">
                                    订单状态
                                </span>
                            </td>
                            <td th:text="${order.createTime != null ? #temporals.format(order.createTime, 'yyyy-MM-dd HH:mm:ss') : '未知'}">
                                2025-06-08 12:00:00
                            </td>
                            <td class="pe-3">
                                <div class="d-flex">
                                    <a th:href="@{'/admin/order/' + ${order.orderNo}}" class="btn btn-sm btn-outline-primary action-btn me-1">
                                        <i class="bi bi-eye"></i> 查看
                                    </a>
                                    <button th:if="${order.status == 20}" class="btn btn-sm btn-outline-success action-btn me-1 ship-btn"
                                            th:data-order-no="${order.orderNo}">
                                        <i class="bi bi-truck"></i> 发货
                                    </button>
                                    <button th:if="${order.status == 10 || order.status == 20}" class="btn btn-sm btn-outline-danger action-btn cancel-btn"
                                            th:data-order-no="${order.orderNo}">
                                        <i class="bi bi-x-circle"></i> 取消
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div th:if="${orderPage.pages > 1}" class="d-flex flex-column flex-md-row justify-content-between align-items-center p-3 bg-light border-top">
                <div class="mb-3 mb-md-0">
                    <span class="text-secondary">显示 
                        <span class="fw-bold" th:text="${(orderPage.current-1) * orderPage.size + 1}">1</span> 到 
                        <span class="fw-bold" th:text="${orderPage.current * orderPage.size > orderPage.total ? orderPage.total : orderPage.current * orderPage.size}">10</span> 
                        条，共 <span class="fw-bold" th:text="${orderPage.total}">100</span> 条记录
                    </span>
                </div>
                <div class="d-flex flex-column flex-md-row align-items-center">
                    <select id="pageSizeSelector" class="form-select form-select-sm me-0 me-md-3 mb-3 mb-md-0" style="width: auto;">
                        <option value="10" th:selected="${orderPage.size == 10}">10条/页</option>
                        <option value="20" th:selected="${orderPage.size == 20}">20条/页</option>
                        <option value="50" th:selected="${orderPage.size == 50}">50条/页</option>
                    </select>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item" th:classappend="${orderPage.current == 1 ? 'disabled' : ''}">
                            <a class="page-link page-nav" th:data-page="${orderPage.current - 1}" href="javascript:void(0)" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        
                        <!-- 动态分页导航 -->
                        <th:block th:with="startPage=${T(Math).max(1, orderPage.current - 2)}, endPage=${T(Math).min(orderPage.pages, startPage + 4)}">
                            <!-- 如果开始页大于1，显示第1页 -->
                            <li class="page-item" th:if="${startPage > 1}">
                                <a class="page-link page-nav" data-page="1" href="javascript:void(0)">1</a>
                            </li>
                            <!-- 如果开始页大于2，显示省略号 -->
                            <li class="page-item disabled" th:if="${startPage > 2}">
                                <span class="page-link">...</span>
                            </li>
                            
                            <!-- 显示页码 -->
                            <li class="page-item" th:each="num : ${#numbers.sequence(startPage, endPage)}"
                                th:classappend="${num == orderPage.current ? 'active' : ''}">
                                <a class="page-link page-nav" th:data-page="${num}" href="javascript:void(0)" th:text="${num}">1</a>
                            </li>
                            
                            <!-- 如果结束页小于总页数-1，显示省略号 -->
                            <li class="page-item disabled" th:if="${endPage < orderPage.pages - 1}">
                                <span class="page-link">...</span>
                            </li>
                            <!-- 如果结束页小于总页数，显示最后一页 -->
                            <li class="page-item" th:if="${endPage < orderPage.pages}">
                                <a class="page-link page-nav" th:data-page="${orderPage.pages}" href="javascript:void(0)" th:text="${orderPage.pages}">10</a>
                            </li>
                        </th:block>
                        
                        <li class="page-item" th:classappend="${orderPage.current == orderPage.pages ? 'disabled' : ''}">
                            <a class="page-link page-nav" th:data-page="${orderPage.current + 1}" href="javascript:void(0)" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 无订单提示 -->
        <div th:if="${orderPage == null || orderPage.records.empty}" class="text-center py-5">
            <i class="bi bi-inbox display-1 text-muted"></i>
            <p class="mt-3 text-muted" th:text="${error != null ? error : '暂无订单记录'}">暂无订单记录</p>
            <button id="refreshBtn" class="btn btn-outline-primary mt-2">
                <i class="bi bi-arrow-repeat me-1"></i>刷新列表
            </button>
        </div>
    </div>
</body>
</html> 